<template>
  <div class="changeMeterDetail">

    <div class="title">{{title}}</div>
    <div class="form">
      <!-- 类型 -->
      <div class="form-item">
        <picker
          :range="typeData"
          :value="type"
          @change="typeChange">
          <CustomInput
            title="类型"
            placeholder="请选择类型"
            :value="formItem.type"
            :isInput="false" />
        </picker>
      </div>
      <!-- 新表编号 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.meterNo"
          title="新表编号"
          placeholder="请输入新表编号"
          :isInput="true" />
      </div>
      <!-- 旧表截止表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.oldMeterValue"
          inputType="number"
          title="旧表截止表值"
          placeholder="请输入旧表截止表值"
          :isInput="true" />
      </div>
      <!-- 新表初始表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.newMeterValue"
          inputType="number"
          title="新表初始表值"
          placeholder="请输入新表初始表值"
          :isInput="true" />
      </div>
    </div>

    <div class="action">
      <i-button type="primary" @click="actionClick">更换</i-button>
    </div>

  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { mapState } from 'vuex'
import { ERR_OK } from 'api/config'
import { saveData } from 'api/changeMeterDetail'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    title ({ typeData, type }) {
      return typeData[type]
    },
    ...mapState({
      currentItem: state => state.changeMeterDetail.currentItem
    })
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      formItem: {},
      type: 0,
      typeData: ['更换水表', '更换电表', '更换电气表']
    }
  },
  methods: {
    typeChange (e) {
      this.type = e.target.value
      this.formItem.type = this.typeData[this.type]
    },
    actionClick () {
      const obj = JSON.parse(JSON.stringify(this.formItem))
      obj.homeId = this.currentItem.id

      this.saveData(obj)
    },
    initData () {
      this.formItem = {
        type: '更换水表',
        meterNo: '',
        oldMeterValue: 0,
        newMeterValue: 0
      }
    },
    async saveData (data) {
      this.$showLoading('更换中')

      const res = await saveData(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '更换成功',
          success: () => {
            wx.reLaunch({
              url: '/pages/home/main'
            })
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '更换失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .changeMeterDetail {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    > .title {
      width: 100%;
      line-height: 40px;
      background-color: rgb(248, 248, 248);
      font-size: 14px;
      padding-left: 10px;
    }
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
    > .sure {
      margin-top: 15px;
      margin-right: 15px;
      margin-bottom: 15px;
      > .button {
        min-width: 100px;
        background-color: $color-default;
        border-radius: 5px;
        color: white;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
</style>
